<template>
    <div class='wrapper'>
        <swiper :options='swiperOption' v-if="swiperShow">
            <!-- slides -->
            <swiper-slide  v-for='item of swiperList' :key='item.id'>
                <img :src='item.imgUrl' class='swiper-img' alt=''>
            </swiper-slide>
            <!-- Optional controls -->
            <div class='swiper-pagination' slot='pagination'></div>
        </swiper>
    </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    swiperList: Array
  },
  data: function () {
    return {
      swiperOption: {pagination: '.swiper-pagination', paginationClickable: true, speed: 1000, loop: true, observer: true, observeParents: true, autoplayDisableOnInteraction: false, autoplay: 1500
      }
    }
  },
  computed: {
    swiperShow: function () {
      return this.swiperList.length
    }
  }
}
</script>

<style lang='stylus' scoped>
    .wrapper >>>.swiper-pagination-bullet-active{
        background-color: #fff !important;
    }
    .wrapper{
        width: 100%;
        // height: 2.04rem;
        background-color: #eee;
    }
    .swiper-img{
        width:100%;
    }
</style>
